<template>
  <div>
    <section style="height: 70px"></section>
    <section>
      <div class="container">
        <div class="col-md-6" style="margin: 0 auto">
          <el-card>
            <el-button @click="logout" plain type="danger" style="width: 20%" class="mb-4"
              >退出登录</el-button
            >
            <el-form label-position="left" :model="onesInfo">
              <el-form-item label="头像" prop="img">
                <el-upload
                  class="avatar-uploader"
                  action="http://127.0.0.1:9096/files/uploadFile"
                  :show-file-list="false"
                  name="multipartFile"
                  :limit="1"
                  style="border: 1px dashed #ccc; width: 100px; height: 100px"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    style="width: 100px; height: 100px"
                    v-if="onesInfo.avatar"
                    :src="onesInfo.avatar"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
              </el-form-item>
              <el-form-item label="账号">
                <el-input disabled v-model="onesInfo.username" />
              </el-form-item>
              <el-form-item label="手机">
                <el-input v-model="onesInfo.phone" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="onesInfo.email" />
              </el-form-item>
              <el-form-item label="">
                <el-button @click="UpdataBtn" type="success" style="width: 100%"
                  >保存修改</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>
    </section>
  </div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, onMounted, defineEmits } from "vue";
import { ShoppingCartFull, Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import router from "../../router";
import request from "../../api/request";
import { useUserCounterStore } from "../../store/oneselfInfo";
import { storeToRefs } from "pinia";
const store = useUserCounterStore();
const onesInfo = ref({});
onBeforeMount(() => {
  onesInfo.value = JSON.parse(JSON.stringify(store.getInfo()));
  if (onesInfo.value.id == null) {
    ElMessage({
      type: "error",
      message: "先登录",
    });
    router.push("/login");
  }
});

const UpdataBtn = () => {
  let params = {
    id: onesInfo.value.id,
    avatar: onesInfo.value.avatar,
    phone: onesInfo.value.phone,
    email: onesInfo.value.email,
  };
  request.post("/customer/update", params).then((res) => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: res.msg,
      });
      store.login(onesInfo.value)
    } else {
      ElMessage({
        type: "error",
        message: res.msg,
      });
    }
  });
};

const handleAvatarSuccess = (response, uploadFile) => {
  onesInfo.value.avatar = response.data;
};
const logout = () => {
  store.logout();
  ElMessage({
    type: "success",
    message: "已退出",
  });
  router.push("/login");
};

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 3) {
    ElMessage.error("图片大小不能超过3MB!");
    return false;
  }
  return true;
};
</script>
<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 95px;
  height: 95px;
  text-align: center;
}
</style>
